<template>
	<div class="demo-image "v-if="allphoto">
		<div class="text">
			<i class="iconfont iconfanhui1" @click="back"></i>
			{{title}}
		</div>
		<div class="block">
			<div class="pushFont" v-for="(image,index) in allphoto">
				<el-image :src="$store.state.baseHttp + image.imgPath" :alt="image.id" :key="image.id">
					<div slot="placeholder" class="image-slot">
						加载中<span class="dot">...</span>
					</div>
				</el-image>
				<span class="iconfont iconchenggong3" @click="choseMany(image.id)" :class="{changeColor:sign(image.id)}"></span>
			</div>
		</div>

		<transition>
			<div class="footer" :class="{eject:Multiple.length !=0}">
				<span class="fl">已选中：{{Multiple.length}} 张照片</span>
				<ul>
					<li @click="cancelChose"><i class="iconfont iconquxiao"></i><span class="">取消选择</span></li>
					<li @click=""><i class="iconfont iconfenxiang"></i><span class="">分享</span></li>
					<li @click=""><i class="iconfont iconfenxiang"><span class="">取消分享</span></i></li>
					<li @click=""><i class="iconfont iconweibiao-_fuzhi-"></i><span class="">移除</span></li>
				</ul>
			</div>
		</transition>
	</div>
</template>

<script>
	import bus from '@/bus/bus.js'
	export default {
		data() {
			return {
				Multiple: [], //当前选中的照片
				title: '',
				allphoto: [],
				//当前选中的照片
				pictureId:'',
			}
		},
		created() {
			this.getdata()
		},
		activated() {
			this.getdata()
		},
		mounted() {},
		methods: {
			getdata() {
				let photoData = this.$route.params.data[0];
				console.log(photoData.photoes)
				this.allphoto = photoData.photoes;
				this.title = photoData.title
			},
			back() {
				this.$router.back()
			},
			//选择多个图片
			choseMany(pictureId) {
				this.pictureId = pictureId; //找到选中的el-img 对象
				let img = null;
				let imgArr = document.querySelectorAll('.el-image')
				console.log(imgArr)
				for (let i = 0; i < imgArr.length; i++) {
					if (this.pictureId == imgArr[i].children[0].alt) { //获取子元素img
						img = imgArr[i]
						break;
					}
				}
				if (this.Multiple.indexOf(pictureId) == -1) { //是否被选中
					this.Multiple.push(pictureId) //1.没有被选中
					img.style.opacity = '0.6';
					img.style.transform = 'scale(0.9)';
					img.style.filter = "blur(1px)"
				} else { //2.被选中
					let index = this.Multiple.indexOf(pictureId)
					this.Multiple.splice(index, 1) //取消选中
					img.style.opacity = 1;
					img.style.transform = 'scale(1)';
					img.style.filter = "blur(0px)"
				}
			},
			//多选标记
			sign(pictureId) { //多选标记
				return this.Multiple.indexOf(pictureId) != -1
			},
			//多选类
			signAll(urlArr) {},
			//选择一个类
			chooseAll(urlArr) {},
			//取消选中
			cancelChose() {
				this.allphoto.forEach(item => {
					if (this.Multiple.indexOf(item.id) != -1) {
						this.choseMany(item.id)
					}
				})
			},
			
		}
	}
</script>

<style scoped="scoped">
	/* 多选图标 */
	
	.iconchenggong3 {
		cursor: pointer;
		position: absolute;
		display: block;
		width: 20px;
		height: 20px;
		top: 10px;
		left: 20px;
		color: #acacac;
		opacity: 0;
		font-size: 30px;
		z-index: 3;
		transition: 0.5s;
	}
	.pushFont:hover .iconchenggong3 {
		opacity: 1;
	}
	.changeColor {
		color: #13CE66;
		opacity: 1;
	}
	.iconfanhui1 {
		font-size: 25px;
		margin-right: 20px;
		cursor: pointer;
	}

	.iconquxiao1 {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}

	.iconquxiao1:hover {
		color: #7e8bff;
	}

	.hiddenBlack::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000000;
		z-index: 99;
		opacity: .4;
	}

	.demo-image {
		padding: 20px;
		padding-top: 80px;
	}

	.footer>ul li {
		float: left;
		width: auto;
		line-height: 60px;
		margin-left: 30px;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}

	.footer>ul li:hover {
		color: #4cff58;
	}

	.footer>ul {
		position: absolute;
		right: 150px;
	}

	.footer>ul li span {
		margin-left: 5px;
	}


	.icon-chenggong {
		font: 30px;
		top: 50px;
	}

	.icon-chenggong {
		position: absolute;
		top: 20px;
		right: 30px;
		bottom: calc(50%-15px);
		font-size: 30px;
		color: #8f9385;
		cursor: pointer;
		opacity: 0;
		transition: 0.3s;
	}

	.footer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #0a85f8;
		z-index: 9;
		height: 0;
		overflow: hidden;
		transition: .5s;
		opacity: 0;
	}

	.footer>span {
		color: white;
		line-height: 60px;
		margin-left: 50px;
		font-size: 20px;
		font-weight: 600;
	}

	.eject {
		height: 60px;
		opacity: 1;
	}


	.el-image {
		overflow: hidden;
		height: 200px;
		margin-left: 10px;
		margin-bottom: 10px;
		box-shadow: 0px 16px 26px -15px #999999;
		opacity: 1;
		z-index: 2;
		transition: 0.5s;
	}


	.demo-image {
		text-align: left;
	}

	.text {
		margin-bottom: 20px;
		color: #737373;
		font-family: 'rendong';
		font-size: 25px;
	}

	.block {
		display: flex;
		position: relative;
		margin-bottom: 40px;
		padding: 10px;
		box-sizing: border-box;
		padding-right: 20px;
		width: 100%;
	}
	.pushFont{
		position: relative;
		width: 22%;
		height: 200px;
		cursor: pointer;
	}

</style>
